<template>
  <div>
    <el-input v-model="nickName" :disabled="true" :placeholder="props.placeholder">
      <template #append>
        <el-button icon="el-icon-search" @click="show"></el-button>
      </template>
    </el-input>
    <SelectUser ref="selectUserRef" @ok="handleSelectUser" />
  </div>
</template>

<script setup name="SelectUserInput">
import SelectUser from '@/components/SelectUser'
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { getUser } from '@/api/system/user'
const { proxy } = getCurrentInstance()

const props = defineProps({
  modelValue: {
    type: [String, Number]
  },
  placeholder: {
    type: String,
    default: '请选择人员'
  }
})

const nickName = ref('')

onMounted(() => {
  setNickName(props.modelValue)
})

// 显示弹框
function show() {
  proxy.$refs['selectUserRef'].show()
}

function handleSelectUser(data) {
  nickName.value = data.nickName
  proxy.$emit('update:modelValue', data.userId)
}

/** 监听modelValue值的变化 */
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    setNickName(newVal)
  }
)

/**
 * 获取并设置用户昵称
 * @param userId
 */
function setNickName(userId) {
  if (userId) {
    getUser(userId).then((response) => {
      let user = response.data
      if (user) {
        nickName.value = user.nickName
      } else {
        nickName.value = ''
      }
    })
  } else {
    nickName.value = ''
  }
}
</script>
